<template>
  <Layout class="start-flow-view-layout">
    <LayoutHeader class="start-flow-view-layout-header">
      <slot name="header"/>
    </LayoutHeader>
    <LayoutHeader>
      <slot name="buttons"/>
    </LayoutHeader>

    <LayoutBody class="start-flow-view-layout-body">
      <slot />
    </LayoutBody>

    <LayoutFooter class="start-flow-view-layout-footer">
      <slot name="footer"/>
    </LayoutFooter>
  </Layout>
</template>
<script setup>
import Layout from '@comp/Layout/Layout.vue';
import LayoutHeader from '@comp/Layout/LayoutHeader.vue';
import LayoutBody from '@comp/Layout/LayoutBody.vue';
import LayoutFooter from '@comp/Layout/LayoutFooter.vue';

defineOptions({name: 'StartFlowViewLayout'})


</script>
<style scoped lang="less">
.start-flow-view-layout {
  height: 100vh;
}

.start-flow-view-layout-header {
  border-bottom: 1px solid #e8e8e8;
}

.start-flow-view-layout-body {
  background: #f7f7f7;
  padding-bottom: 20px;
}

.start-flow-view-layout-footer {
  z-index: 10;
  box-shadow: 0 0 25px var(--van-gray-4), 0 -1px 6px var(--van-gray-4);
}
</style>